<template>
  <div class="home-view">
    <!--    顶部菜单选项栏-->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
      @select="activeNewMenu">
      <el-menu-item index="/welcome">欢迎使用</el-menu-item>
      <el-menu-item index="/goods">商品管理</el-menu-item>
      <el-menu-item index="/orders">订单管理</el-menu-item>
      <el-menu-item index="/comment">评论概况</el-menu-item>
      <el-menu-item index="/inventory">库存管理</el-menu-item>
      <el-menu-item index="/attribute">属性管理</el-menu-item>
    </el-menu>
    <div>
      <!--    顶部信息区域-->
      <div class="top-bar">
        <span>{{ merchantName }}后台管理系统</span>
        <el-button @click="exitLogin">退出登录</el-button>
      </div>
      <!--    底部信息呈现区域-->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'HomeView',
  created() {
    this.activeIndex = this.$route.path
    this.getMerchantBasicInfo()
  },
  data() {
    return {
      // 顶部菜单栏默认被激活的项的索引值
      activeIndex: '/welcome',
      // 店铺名
      merchantName: ''
    }
  },
  methods: {
    ...mapMutations(['setSellingGoodsList']),
    // 激活的菜单项发生切换时触发
    activeNewMenu(index) {
      this.activeIndex = index
    },
    // 获取该商家的基本信息
    getMerchantBasicInfo() {
      this.merchantName = sessionStorage.getItem('mname')
    },
    // 退出按钮被点击时触发
    exitLogin() {
      sessionStorage.removeItem('id')
      sessionStorage.removeItem('mname')
      this.setSellingGoodsList([])
      this.$router.push('/')
    }
  }
}
</script>

<style scoped lang="less">

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  span:first-child {
    font-size: 18px;
    font-weight: 600;
  }
}
</style>
